import { useState } from 'react';

// 定义 Hook 返回类型
interface UseInputReturn {
    value: string;
    isValid: boolean;
    hasError: boolean;
    // 声明了一个属性，类型为函数，接收一个参数，类型为 React.ChangeEvent<HTMLInputElement>，返回值为 void。
    // React.ChangeEvent<HTMLInputElement> 是一个 React 事件对象，表示输入框的值改变时的事件。
    valueChangeHandler: (event: React.ChangeEvent<HTMLInputElement>) => void;
    inputBlurHandler: () => void;
    reset: () => void;
}


// 自定义 Hook 实现 定义了一个 useInput 函数，接收一个验证函数作为参数，
// 返回一个包含输入值、验证状态、输入事件处理函数、失焦事件处理函数和重置函数的对象。
function useInput(validateValue: (value: string) => boolean): UseInputReturn {
    const [enteredValue, setEnteredValue] = useState('');
    const [isTouched, setIsTouched] = useState(false);

    const valueIsValid = validateValue(enteredValue);
    const hasError = !valueIsValid && isTouched;

    function valueChangeHandler(event: React.ChangeEvent<HTMLInputElement>) {
        setEnteredValue(event.target.value);
    }

    function inputBlurHandler() {
        setIsTouched(true);
    }

    function reset() {
        setEnteredValue('');
        setIsTouched(false);
    }

    return {
        value: enteredValue,
        isValid: valueIsValid,
        hasError,
        valueChangeHandler,
        inputBlurHandler,
        reset
    };
}

export default useInput;
